<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改头像</title>
<meta name="viewport"
	content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link type="text/css" rel="stylesheet"
	href="assets/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="assets/css/style.css">
</head>

<body class="Spage_body">
	<!-- top-head -->
	<div class="top_head">
		修改头像 <a href="center" class="top_head_back"><img src="assets/images/back_btn.png"></a>
	</div>
	<!-- top-head -->
	<!-- wrap -->
	<!-- login_box -->
	<div class="container login_box">
		<form>
			<p style="width: 100%">
				<img id="userPic" width="150" height="150" src="assets/images/userpic.png" style="border-radius:50%;" alt="用户头像">
			</p>
			<div class="login_input">
				<div style="width: 100%;height:280px;">
					<div>
						<div class="">
							
							<div class="">
								<!--  <progress id="progressBar" value="0" max="100"
            style="width: 100%;height: 20px; " style="transition: vallue 1s;"> </progress>   -->
								<div class="file-box" style="margin-top:50px;">
									<input type="file" name="file" class="file" id="file" size="28" />
								</div>
								<p id="progressBox"
									style="width: 100%; height: 18px; border: 1px solid #ccc;">
									<span id="progressBar"
										style="display: inline-block; width: 0; height: 18px; background: blue;"></span>
								</p>
								<div class="">
									<h4 class="" id="myModalLabel" style="margin-top: 20px;">文件上传进度</h4>
								</div>
								<span id="percentage" style="color: blue;"></span> <br> <br>
								
								<p id="uploadRs"></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="login_btn col-xs-12">
				<input id="savePic" type="button" value="修改" onclick="UploadFile()"> 
			</div>
		</form>
	</div>
	<!-- login_box -->
	<!-- wrap -->
	<script type="text/javascript" src="assets/scripts/jquery-1.11.2.min.js"></script>
	<script>
	function UploadFile() {
		var pathUrl = "";
		$('#uploadRs').html('上传中。。。'); 
		var fileObj = document.getElementById("file").files[0]; // js 获取文件对象 
		var FileController = "editPic"; // 接收上传文件的后台地址  
		var fileSize = fileObj.size;
		var maxSize = 2097152;
		if(fileSize > maxSize){
			alert("不可以超过3M。");
			$("#uploadRs").html("");
		}else{
			// FormData 对象---进行无刷新上传 
			var form = new FormData();
			form.append("author", "zz"); // 可以增加表单数据 
			form.append("file", fileObj); // 文件对象 
			// XMLHttpRequest 对象 
			var xhr = new XMLHttpRequest();
			xhr.open("post", FileController, true);
			xhr.onload = function() {
				setTimeout(function(){
					$('#uploadRs').html('修改完成！'); 
					alert("上传完成!");
					$("#userPic").attr("src",pathUrl);
					$("#file").val("");
					$("#progressBar").width(0).css("transition","inherit");
					$("#percentage").html("");
					$("#uploadRs").html("");
				},1000);
			};
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){    
					var reObject = JSON.parse(xhr.responseText);
					if(reObject.res == "1"){
						pathUrl = reObject.picPath;
						console.log(pathUrl);
					}else{
						alert(reObject.msg);
					}
			    }   
			};
			//监听progress事件 
			xhr.upload.addEventListener("progress", progressFunction, false);
			xhr.send(form);
		}
	}
	function progressFunction(evt) {
		var progressBar = document.getElementById("progressBar");
		var percentageDiv = document.getElementById("percentage");
		if (evt.lengthComputable) {
			$("#progressBar").width(0).css("transition","width .8s linear");
			$("#progressBar").width(Math.round(evt.loaded / evt.total * 100) + "%");
			$("#percentage").html(Math.round(evt.loaded / evt.total * 100) + "%");
		}
	}
	$(document).ready(function(){
		$.get("getUser",function(data){
			$("#userPic").attr("src",data.pic); 
		})

		
		$("#file").change(function(){
			$("#progressBar").css("transition","inherit");
			$("#progressBar").width(0);
			$("#percentage").html("");
		}); 
	})
	</script>
</body>
</html>